<template>
  <a-spin tip="Loading..." :spinning="spinning">
    <div class="operation-box">
      <a-card title="非住户详情">
        <a-button type="primary" slot="extra" @click="() => {$router.push({name:'data_household_operation',params:{id:$route.params.id}})}">编辑</a-button>
        <a-button style="margin-left: 10px;"   slot="extra" @click="() => { $router.push({name:'data_household_nonindex',params:{pageNo:this.cur_page}}) }">返回</a-button>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>姓名：<span>{{detail.name}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>手机号：<span>{{detail.phone}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>所属小区：<span>{{detail.bd_name}}</span></div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>住户身份：<span>{{detail.type_text}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>出生日期：<span>{{detail.createtime}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>业主卡号：<span>{{detail.card_numbers}}</span></div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>入住时间：<span>{{detail.in_time}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>入住原因：<span>{{detail.in_text}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>住户照片：<span v-if="$common.isEmpty(detail.imgs)">暂无附件</span>
              <a href="javascript:void(0);" @click="lookImg('imgs')" v-else>查看附件</a>
            </div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>QQ：<span>{{detail.qq}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>微信：<span>{{detail.wechat}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>电子邮箱：<span>{{detail.email}}</span></div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>家庭电话：<span>{{detail.tel}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>紧急联系人：<span>{{detail.sos_user}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>紧急联系人电话：<span>{{detail.sos_call}}</span></div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>宠物品种：<span>{{detail.pet_breed}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>体重：<span>{{detail.pet_weight}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>宠物类别：<span>{{detail.pet_category}}</span></div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>是否办狗证：<span>{{detail.pet_card_text}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>名族：<span>{{detail.race | getRaceText(famous)}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>政治面貌：<span>{{detail.po_status}}</span></div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>婚姻状况：<span>{{detail.marriage}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>身份证号：<span>{{detail.license ? detail.license : ''}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>身份证照片：<span v-if="$common.isEmpty(detail.license_img)">暂无附件</span>
              <a href="javascript:void(0);" @click="lookImg('license_img')" v-else>查看附件</a>
            </div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>户口类型：<span>{{detail.account_type | getAccountTypeText}}</span></div>
          </a-col>
          <!-- <a-col :span="8">
            <div>户籍所在地：<span>{{detail.account_address | getAccountAddressText(city)}}</span></div>
          </a-col> -->
          <a-col :span="8">
            <div>户籍详细地址：<span>{{detail.address}}</span></div>
          </a-col>
           <a-col :span="8">
            <div>暂住证号码：<span>{{detail.tem_permit}}</span></div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
         
          <a-col :span="8">
            <div>居住类型：<span>{{detail.tem_type | getTemTypeText}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>相关标签：<span>{{detail.labels_name}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>备注：<span>{{detail.remarks}}</span></div>
          </a-col>
        </a-row>
        
      </a-card>
    </div>
    <div class="operation-box">
      <a-card title="相关房屋">
        <a-table :columns="housesColumns" :dataSource="housesList" rowKey="id">
          <template slot="label_name" slot-scope="text,record">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{record.label_name ? record.label_name : '暂无标签'}}</span>
              </template>
              <a href="javascript:void(0);">查看</a>
            </a-tooltip>
          </template>
          <template slot="operation" slot-scope="text,record">
            <a-dropdown>
              <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
              <a-menu slot="overlay" @click="housesOperation($event,record)">
                <a-menu-item key="1">详情</a-menu-item>
                <a-menu-item key="2">解绑</a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </a-table>
      </a-card>
    </div>
    <div class="operation-box">
      <a-card title="相关车位">
        <a-table :columns="parkingColumns" :dataSource="parkingData" rowKey="id">
          <template slot="label_name" slot-scope="text,record">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{record.label_name ? record.label_name : '暂无标签'}}</span>
              </template>
              <a href="javascript:void(0);">查看</a>
            </a-tooltip>
          </template>
          <template slot="operation" slot-scope="text,record">
            <a-dropdown>
              <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
              <a-menu slot="overlay" @click="parkingOperation($event,record)">
                <a-menu-item key="1">详情</a-menu-item>
                <a-menu-item key="2">解绑</a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </a-table>
      </a-card>
    </div>
    <div class="operation-box">
      <a-card title="相关车辆">
        <a-table :columns="vehicleColumns" :dataSource="vehicleData" rowKey="id">
          <template slot="label_name" slot-scope="text,record">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{record.label_name ? record.label_name : '暂无标签'}}</span>
              </template>
              <a href="javascript:void(0);">查看</a>
            </a-tooltip>
          </template>
          <template slot="operation" slot-scope="text,record">
            <a-dropdown>
              <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
              <a-menu slot="overlay" @click="vehicleOperation($event,record)">
                <a-menu-item key="1">详情</a-menu-item>
                <a-menu-item key="2">解绑</a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </a-table>
      </a-card>
    </div>
    <div class="operation-box" v-if="!$common.isEmpty(houseUserList)">
      <a-card title="相关住户">
        <a-table :columns="userColumns" :dataSource="houseUserList" rowKey="id">
          <template slot="label_name" slot-scope="text,record">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{record.label_name ? record.label_name : '暂无标签'}}</span>
              </template>
              <a href="javascript:void(0);">查看</a>
            </a-tooltip>
          </template>
          <template slot="operation" slot-scope="text,record">
            <a-dropdown>
              <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
              <a-menu slot="overlay" @click="houseOperation($event,record)">
                <a-menu-item key="1">详情</a-menu-item>
                <a-menu-item key="2">解绑</a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </a-table>
      </a-card>
    </div>
    <div class="operation-box">
      <a-card title="相关账单">
        <s-table :columns="priceColumns" :data="priceData" :loading="loading">
        </s-table>
      </a-card>
    </div>
    <div class="operation-box">
      <a-card title="入住历史">
        <a-table :columns="historyColumns" :dataSource="historyData" rowKey="id">
          <template slot="label_name" slot-scope="text,record">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{record.label_name ? record.label_name : '暂无标签'}}</span>
              </template>
              <a href="javascript:void(0);">查看</a>
            </a-tooltip>
          </template>
          <template slot="operation" slot-scope="text,record">
            <a-dropdown>
              <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
              <a-menu slot="overlay" @click="houseOperation($event,record)">
                <a-menu-item key="1">详情</a-menu-item>
                <a-menu-item key="2">解绑</a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </a-table>
      </a-card>
    </div>
    <a-modal :visible="lookFileImgModal" :footer="null" @cancel="() => { lookFileImgModal = false; }">
      <img style="padding:5%" v-for="(item,index) in imgList" :key="index" :src="baseURL + 'static/uploads/' + item.url" :alt="'车辆信息附件图 - '+item.name" :style="{width:'100%',minHeight:'100px'}">
    </a-modal>
  </a-spin>
</template>

<script>
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import {mapState} from 'vuex'
  import {STable} from '@/components'
  export default {
    name: 'data_household_noindex_detail',
      components: {
          STable
      },
    data() {
      return {
          data:[],
        token:this.$ls.get(ACCESS_TOKEN), // 用户token
        baseURL:this.axios.defaults.baseURL,
        spinning:false,
        form:this.$form.createForm(this),
        col:{
          labelCol:{xs:{span:24},sm:{span:8}},
          wrapperCol:{xs:{span:24},sm:{span:10}}
        },
        cur_page:1,
        housesColumns:[{title:'房号',dataIndex:'houses_name'},{title:'小区',dataIndex:'bd_name'},{title:'房屋类型',dataIndex:'houses_type_text'},{title:'身份',dataIndex:'type_text'},{title:'有效期',dataIndex:'time_text'},{title:'数据标签',dataIndex:'label_name',scopedSlots:{customRender:'label_name'}},{title:'操作',dataIndex:'operation',scopedSlots:{customRender:'operation'}}], // 相关房屋列
        housesList:[], // 相关房屋数据
        parkingColumns:[{ title:'车位号',dataIndex:'car_area_name' }, { title: '小区',dataIndex:'bd_name' },{title:'数据标签',dataIndex:'label_name',scopedSlots:{customRender:'label_name'}},{title:'操作',dataIndex:'operation',scopedSlots:{customRender:'operation'}}], // 相关车位列
        parkingData:[], // 相关车位列数据
        vehicleColumns:[{ title:'车牌号码',dataIndex:'car_name' }, { title: '小区',dataIndex:'bd_name' },{ title: '车主姓名',dataIndex:'username' },{ title: '车主手机号',dataIndex:'phone' },{title:'数据标签',dataIndex:'label_name',scopedSlots:{customRender:'label_name'}},{title:'操作',dataIndex:'operation',scopedSlots:{customRender:'operation'}}], // 相关车辆列
        vehicleData:[], // 相关车辆数据

        userColumns:[{title:'姓名',dataIndex:'name'},{title:'小区',dataIndex:'bd_name'},{title:'楼宇',dataIndex:'building_name'},{title:'单元',dataIndex:'unit_name'},{title:'房号',dataIndex:'houses_name'},{title:'手机',dataIndex:'phone'},{title:'数据标签',dataIndex:'label_name',scopedSlots:{customRender:'label_name'}},{title:'操作',dataIndex:'operation',scopedSlots:{customRender:'operation'}}], // 相关住户列
        houseUserList:[], // 相关住户列数据

        id:null, // 住户id
        detail:{}, // 住户信息
        lookFileImgModal:false, // 查看图片弹窗
        imgList:[], // 图片数据
          priceColumns: [{ title: '房号/车牌/车位号/住户',dataIndex:'info' },{ title: '费用名称',dataIndex:'name' },{ title: '开始时间',dataIndex:'start_time' },{title:'结束时间',dataIndex:'end_time'},{title:'单价',dataIndex:'price'},{title:'数量',dataIndex:'num'},{title:'应收金额',dataIndex:'money'},{title:'状态',dataIndex:'status_txt'}],
          historyColumns: [{ title:'小区',dataIndex:'bd_name' }, { title: '楼宇',dataIndex:'build_name' },{ title: '单元',dataIndex:'unit_name' },{ title: '房号',dataIndex:'name' },{title:'类型',dataIndex:'type_txt'},{title:'备注',dataIndex:'note'},{title:'时间',dataIndex:'create_time'}],
        historyData: [],
          loading:false,
          pas:[],
          queryParam: {},
          priceData:parameter => {
              let { id } = this.$route.params;
              this.pas = parameter;
              this.queryParam['id'] = id;
              return this.getPrice(Object.assign(parameter, this.queryParam))
                  .then(res => {
                      return res
                  })
          },
      }
    },
    computed:{
      ...mapState({
        famous:state => state.app.famous,
        city:state => state.app.city,
      })
    },
    filters:{
      // 获取名族信息
      getRaceText(val,data){
        let info = data.find(item => item.value === val);
        return typeof info !== 'undefined' && info ? info.label : '未知';
      },
      // 获取户口类型数据
      getAccountTypeText(val) {
        let typeList = [{ label: '城镇户口', value: 1 },{ label: '农村居民户口', value: 2 },{ label: '集体户口', value: 3 }];
        let info = typeList.find(item => item.value === val);
        return typeof info !== 'undefined' && info ? info.label : '未知';
      },
      // 获取居住类型数据
      getTemTypeText(val) {
        let typeList = [{ label: '常住', value: 1 },{ label: '暂住', value: 2 },{ label: '其它', value: 3 }];
        let info = typeList.find(item => item.value === val);
        return typeof info !== 'undefined' && info ? info.label : '未知';
      },
      // 获取户籍所在地
      getAccountAddressText(val,data) {
        let text = '';
        if(typeof val !== 'undefined' && val && val.length > 0){
          let provinceIndex = data.findIndex(item => item.value == val[0]);
          let cityIndex = data[provinceIndex]['children'].findIndex(item => item.value == val[1]);
          let area = data[provinceIndex]['children'][cityIndex]['children'].find(item => item.value == val[2]);
          text = `${data[provinceIndex]['label']}/${data[provinceIndex]['children'][cityIndex]['label']}/${area['label']}`;
          return text;
        }else return text;
      }
    },
    async mounted() {
      let { id } = this.$route.params;
      this.id = Number(id);
        let cur_page;
      if(!isNaN(this.id)){
        this.getInfo(id);
          this.getHis(id);
      }else this.$router.go(-1);

       if(!isNaN(cur_page)){
        this.cur_page=cur_page;
      }else{
        this.cur_page=1;
      }
    },
    methods:{
      // 获取车辆信息
      getInfo(id) {
        this.spinning = true;
        this.axios({
          method:'post',
          url:'/household/getInfo',
          data:{token:this.token,id}
        }).then(res => {
          this.detail = res.data.data;
          this.housesList = res.data.houses;
          this.parkingData = res.data.car_area;
          this.vehicleData = res.data.car;

          this.houseUserList = res.data.house_user;
        }).catch(err => {
          this.$message.error('服务器发生错误...',2);
        }).finally(() => {
          this.spinning = false;
        });
      },
        getHis (id) {
            this.spinning = true;
            this.axios({
                method:'post',
                url:'/household/get_his',
                data:{token:this.token,id}
            }).then(res => {
                this.historyData = res.data.data;
            }).catch(err => {
                this.$message.error('服务器发生错误...',2);
            }).finally(() => {
                this.spinning = false;
            });
        },
        getPrice (param) {
            this.spinning = true;
            return new Promise((resolve,reject) => {
                this.axios({
                    method:'get',
                    url: '/household/get_price',
                    params:Object.assign(param,{token:this.token})
                }).then(res => {
                    if(res.code === 0){
                        resolve(res.data);
                        this.data = res.data['data'];
                    }else{
                        this.$message.error(res.data.msg,2);
                    }
                }).catch(err => {
                    this.$message.error('服务器发生错误...',2);
                    this.loading = false;
                })
            })
        },
      // 相关房屋操作
      housesOperation({ key },info) {
        const _this = this;
        if(key === '1') this.$router.push({name:'data_houses_detail',params:{id:info.houses_id}});
        if(key === '2'){
          _this.$confirm({
            title: `确定要将住户从\"${info.houses_name}\"房屋解绑？`,
            onOk() {
              return new Promise((resolve, reject) => {
                _this.axios({
                  method:'post',
                  url:'/houses/untied',
                  data:{token:_this.token,houses_id:info.houses_id,house_user_id:info.house_user_id},
                }).then(res => {
                  if(res.code === 0){
                    _this.$message.success(res.msg,2);
                    _this.getInfo(_this.id);
                    resolve();
                  }else reject(res.msg);
                }).catch(err => {
                  _this.$message.error('服务器发生错误...',2);
                })
              }).catch((msg) => _this.$message.error(msg,2));
            },
            onCancel() {},
          });
        }
      },
      // 相关车位操作
      parkingOperation({ key },info) {
        const _this = this;
        if(key === '1') this.$router.push({name:'data_parking_detail',params:{id:info.car_area_id}});
        if(key === '2'){
          _this.$confirm({
            title: `确定要将住户从\"${info.car_area_name}\"车位解绑？`,
            onOk() {
              return new Promise((resolve, reject) => {
                _this.axios({
                  method:'post',
                  url:'/parking/untiedUser',
                  data:{token:_this.token,house_user_id:info.house_user_id,car_area_id:info.car_area_id},
                }).then(res => {
                  if(res.code === 0){
                    _this.$message.success(res.msg,2);
                    _this.getInfo(_this.id);
                    resolve();
                  }else reject(res.msg);
                }).catch(err => {
                  _this.$message.error('服务器发生错误...',2);
                })
              }).catch((msg) => _this.$message.error(msg,2));
            },
            onCancel() {},
          });
        }
      },
      // 相关车辆操作
      vehicleOperation({ key },info) {
        const _this = this;
        if(key === '1') this.$router.push({name:'data_vehicle_detail',params:{id:info.car_id}});
        if(key === '2'){
          _this.$confirm({
            title: `确定要将住户从\"${info.car_name}\"车辆解绑？`,
            onOk() {
              return new Promise((resolve, reject) => {
                _this.axios({
                  method:'post',
                  url:'/vehicle/untiedUser',
                  data:{token:_this.token,house_user_id:info.house_user_id,car_id:info.car_id},
                }).then(res => {
                  if(res.code === 0){
                    _this.$message.success(res.msg,2);
                    _this.getInfo(_this.id);
                    resolve();
                  }else reject(res.msg);
                }).catch(err => {
                  _this.$message.error('服务器发生错误...',2);
                })
              }).catch((msg) => _this.$message.error(msg,2));
            },
            onCancel() {},
          });
        }
      },
      // 相关住户操作
      houseOperation({ key },info) {
        const _this = this;
        if(key === '1') this.$router.push({name:'data_household_detail',params:{id:info.id}});
        if(key === '2'){
          _this.$confirm({
            title: `确定要将住户\"${info.name}\"解绑？`,
            onOk() {
              return new Promise((resolve, reject) => {
                _this.axios({
                  method:'post',
                  url:'/vehicle/untiedUser',
                  data:{token:_this.token,house_user_id:info.id,car_id:_this.detail.id},
                }).then(res => {
                  if(res.code === 0){
                    _this.$message.success(res.msg,2);
                    _this.getInfo(_this.id);
                    resolve();
                  }else reject(res.msg);
                }).catch(err => {
                  _this.$message.error('服务器发生错误...',2);
                })
              }).catch((msg) => _this.$message.error(msg,2));
            },
            onCancel() {},
          });
        }
      },

      // 查看附件
      lookImg(type){
        this.lookFileImgModal = true;
        this.imgList = this.detail['type'];
      }
    }
  }
</script>

<style lang="less" scoped>
  .operation-box{
    background: #ffffff;
    margin: 25px 25px 0;
    .detail-row-margin-bottom-15{
      margin-bottom: 15px;
    }
  }
</style>